import React, { Component } from 'react';
import {Text,View,Dimensions,ScrollView,StyleSheet} from 'react-native';
import {Tabs} from 'iftide';
const screenProps={
    screenWidth:Dimensions.get('window').width,
    screenHeight:Dimensions.get('window').height
}
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state={
            num:123
        }
    }

    tabEventClick=(data)=>{
        //this.setState({num:456})
    }
    _tab1 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50}}>
                 <Text>第一个Tab</Text>
            </View>
        )
    }

    _tab2 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第二个Tab</Text>
            </View>
        )
    }
    _tab3 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第三个Tab</Text>
            </View>
        )
    }
     
    render() {
        // let img = require('./sound.png')
        let tab1 = {
            // themeColor: 'green',
            // borderColor:'#f1f1f1',
            radius:0,
            padding:0,
            type: 'linear',
            // activeLinePosition:'bottom',
            hasSplitLine:false,
            isUpdate:false,
            backgroundHeight:35,
            tabItemWidth:120,
            tabData:[
                {
                    text:'标签一标签一标签一标签一',
                    key:'tab1',
                    active:true,
                    hasArrow:true,
                    // img:img,
                    tabContent:this._tab1
                },
                {
                    text:'标签二',
                    key:'tab2',
                    tabContent:this._tab2
                }
            ],
            // eventClick:this.tabEventClick
        }
         
        /*
        * width:screenProps.screenHeight,height:screenProps.screenWidth,transform: [{ rotate: '90deg' }]
        * */
        return (
            <View style={{height:200,backgroundColor:'white'}}>
                <Text style={styles.text}>样式一</Text>
                <Tabs {...tab1}/> 
            </View>
        );
    }
}
const styles = StyleSheet.create({
    text: {
        marginTop:10,
        padding: 5,
        margin: 5,
        backgroundColor: '#f5f7f9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    }
})
 